<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <script src="dragStatic/js/jquery-3.2.1.min.js"></script>
    <script src="preview/js/rem.js"></script>
    <script src="dragStatic/js/common.js"></script>
    <script src="preview/js/countUp.js"></script>
    <title>大数据单模块-到馆统计</title>
    <style>
        /*设置整体柱子盒子距离上面一段距离，防止数据充满遮住标题 */
        .come .come-content {
            margin-top: 0.4rem;
        }
        /*设置上面三个到馆大盒子高度 */
        .come .come-content-up {
            height: 2.9rem;
            margin-bottom:0.08rem;

        }
        /*设置三个柱子外层大盒子宽度 */
        .come-content-up div[class^="dg"] {
            float: left;
            width: 32.2%;
            text-align: center;
        }
        .come-content-up .dg2 {
            margin: 0 1.7%;
        }
        /*设置本周到馆等字体居中显示 */
        .come-content-up div[class^="dg"] p {
            text-align: center;
        }
        /*设置柱子的背景条 */
        .come-content-up .lbar-warp {
            background-color: #1b254f;
            position: relative;
            display: inline-block;
            display: -webkit-inline-box;
            text-align: center;
            height: 2.56rem;
            width: 0.22rem;
            -webkit-border-radius: 0.11rem;
            -moz-border-radius: 0.11rem;
            border-radius: 0.11rem;

        }
        /*设置柱子的上涨条 */
        .come-content-up .lbar-warp .timer {
            height: 0px;
            background-color: #1868c0;
            position: absolute;
            bottom: 0px;
            width: 100%;
            transition: height 2s;
            -moz-transition: height 2s;
            -webkit-transition: height 2s;
            -o-transition: height 2s;
            font-size: 1.333333em;
            white-space: nowrap;
            max-height: 2.56rem;
            -webkit-border-radius: 0.11rem;
            -moz-border-radius: 0.11rem;
            border-radius: 0.11rem;
        }
        /*设置累计到馆横向背景条 */
        .come-content-down .bar-warp {
            background-color: #1b254f !important;
            width: 100%;
            -webkit-border-radius: 0.2rem;
            -moz-border-radius: 0.2rem;
            border-radius: 0.2rem;
            height: 0.4rem;
            line-height: 0.4rem;
            margin-top:0.08rem;
        }
        /*设置累计到馆横向上涨条 */
        .come-content-down .bar-warp .timer {
            font-size: 1.333333em;
            white-space: nowrap;
            -webkit-border-radius: 0.2rem;
            -moz-border-radius: 0.2rem;
            border-radius: 0.2rem;
            padding-left: 0.2rem;
            height: 100%;
            width: 60%;
            transition: width 2s;
            -moz-transition: width 2s;
            -webkit-transition: width 2s;
            -o-transition: width 2s;
            background-image: repeating-linear-gradient(-45deg, #163a72, #163a72 3px, #191a23 1px, #163a72 4px) !important;
        }
        .come-content-down p {
            text-align: left;
            padding-left: 0.11rem;
        }
        /*设置放数字的p元素位置及边框样式 */
        .come_num{
            position: absolute;
            color:#fff;
            text-align:center;
            left:50%;
            top:-0.55rem;
            -webkit-transform:translateX(-50%);
            -moz-transform:translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform:translateX(-50%);
            transform:translateX(-50%);
            border: 1px solid #144b70;
            display: block;
            background: rgba(4, 34, 62, 0.75);
            width: auto;
            padding:0.04rem 0.1rem;
            -webkit-border-radius: 0.06rem;
            -moz-border-radius: 0.06rem;
            border-radius: 0.06rem;
        }
        /*设置放数字的p元素伪元素小三角 */
        .come_num::after{
            top: 100%;
            left: 50%;
            -webkit-transform:translateX(-50%);
            -moz-transform:translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform:translateX(-50%);
            transform:translateX(-50%);
            display: inline-block;
            content: "";
            position: absolute;
            width: 0;
            border-left: 0.1rem solid transparent;
            border-right: 0.1rem solid transparent;
            border-bottom: 0.1rem solid transparent;
            border-top: 0.1rem solid rgba(20, 75, 112, 0.4);

        }
        /*设置单位 人 的字体大小 */
        .bar-warp .time small,
        .lbar-warp .time small {
            font-size: 0.61em;
        }
        /*1366下面*/
        @media screen and (max-width: 180px) {
            /*设置放数字的p元素位置及边框样式 */
            .come_num{
                padding:0.04rem 0.1rem;
                font-size:10px;!important;
            }
        }

    </style>
</head>
<body>
    <div class="come">
        <div class="module-title ycenterbox"><img src="preview/img/listimg.png" /><span class="section_name" data-key="came_count_str">到馆统计</span></div>
        <div class="come-content">
            <div class="come-content-up">
                <div class="dg1">
                    <div class="lbar-warp">
                        <div class="timer"></div>
                    </div>
                    <p>今日到馆</p>
                </div>
                <div class="dg2">
                    <div class="lbar-warp">
                        <div class="timer"></div>
                    </div>
                    <p>当前在馆</p>
                </div>
                <div class="dg3">
                    <div class="lbar-warp">
                        <div class="timer"></div>
                    </div>
                    <p>本周到馆</p>
                </div>
            </div>
            <div class="come-content-down">
                <p>累计到馆(从2016年1月开始)</p>
                <div class="bar-warp"><div class="timer"></div></div>
            </div>
        </div>
        <div class="block"></div>
    </div>
</body>
<script>
    var v21,v22,v23,v24,total=1500;
    var op={suffix:'人'};
    var library_timer=null;
    var websocket_come;
    //最大重连次数
    var max_try_num_came_count = 10;
    var curr_try_num_came_count = 0;
    window.onresize = function(){
        page_init(100,405,"到馆统计");
    };
    window.onload = function(){
        page_init(100,405,"到馆统计");
        var gobalAddr="whfw.superlib.com:9025";
        var wsPath = "wss://" + gobalAddr + "/cxts/websocket/came_count";
        library_count(wsPath);
        ///到馆统计
        function library_count(ws_url){
            curr_try_num_came_count++;
            try{
                websocket_come=new WebSocket(ws_url);//参数是服务器地址，还有一个参数是自协议可以不写
                //当服务器连接成功之后，监听建立连接
                websocket_come.onopen=function(res){
                    console.log('info ---->> 到馆统计数据连接成功...');
                };
                websocket_come.onmessage=function(msg){
                    var json = JSON.parse(msg.data);
                    var data = json.data;
                    if (data == null || data == undefined || data.length == 0) {
                        console.log("warning ---->> 到馆统计无数据返回...");
                        return;
                    }
                    console.log("info ---->> 到馆统计推送新数据了...");
                    clearTimeout(library_timer);///每次推送数据都把之前的定时器清除
                    v21=isNull(data[0].f_came_count_by_day);
                    v22=isNull(data[0].f_came_count_now);
                    v23=isNull(data[0].f_came_count_by_week);
                    v24=isNull(data[0].f_came_count_by_all);
                    total=isNull(data[0].fHoldUplimit);
                    library_num_move();////当到馆数据存在时候，再调用动态效果
                    divFlex("come");////调用缩放功能
                };
                websocket_come.onclose=function(event){
                    if (curr_try_num_came_count <= max_try_num_came_count) {
                        console.log("warning ---->> 到馆统计连接关闭，6秒后重新连接...");
                        setTimeout(function () {
                            library_count(wsPath);
                        }, 6000);
                    } else {
                        console.log("warning ---->> 到馆统计连接超过最大重连次数，不再重连...");
                    }
                };
                websocket_come.onerror = function () {
                    console.log("error ---->> 到馆统计连接发生错误...");
                };
            } catch (e) {
                console.log("error ---->> 到馆统计连接发生错误...");
            }
        }
        ///到馆统计结束
    }
    function library_num_move(){
        clearTimeout(library_timer);////每次循环都把上一次的定时器清除
        $(".timer").html(' ');
        $(".lbar-warp .timer").hide();
        $(".lbar-warp .timer").height(0);
        $(".lbar-warp .timer").show();
        $(".dg1 .timer").height((v21/total)*100+"%");
        $(".dg2 .timer").height((v22/total)*100+"%");
        $(".dg3 .timer").height((v23/(total*7))*100+"%");
        $(".timer").append('<p class="come_num"></p>');
        var d1 = new CountUp($(".dg1 .timer .come_num"), 0, v21, 0, 3, op);
        var d2 = new CountUp($(".dg2 .timer .come_num"), 0, v22, 0, 3, op);
        var d3 = new CountUp($(".dg3 .timer .come_num"), 0, v23, 0, 3, op);
        var d4 = new CountUp($(".come-content-down .timer"), 0, v24, 0, 3, op);
        d1.start();
        d2.start();
        d3.start();
        d4.start();
        library_timer=setTimeout(library_num_move,10000);
    }
</script>

</html>